<!-- 充值 -->
<template>
    <el-card>
        <el-descriptions title="充值">
            <template #extra>
                <el-button @click="addNotice" type="primary">添加</el-button>
            </template>
        </el-descriptions>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="amount" label="充值金额" />
            <el-table-column prop="bangNum" label="爆点" />
            <el-table-column prop="sort" label="排序" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button @click="edit(row)" type="primary" link> 编辑 </el-button>
                    <el-button @click="del(row.rechargeId)" type="danger" link> 删除 </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 添加弹窗 -->
    <el-dialog v-model="AddDialog" title="添加" width="25%" :before-close="handleClose">
        <el-form label-position="right" label-width="100px" :model="formLabelAlign">
            <el-form-item label="充值金额">
                <el-input v-model="formLabelAlign.amount" placeholder="请输入充值金额" />
            </el-form-item>
            <el-form-item label="爆点">
                <el-input v-model="formLabelAlign.bangNum" placeholder="请输入爆点数量" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="formLabelAlign.sort" placeholder="请输入排序" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="save">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>


<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { GetRechargeListApi, AddRechargeListApi, EchoRechargeListApi, EditRechargeListApi, DelRechargeListApi } from '@/api/Recharge';

const AddDialog = ref(false)
//弹窗form
const formLabelAlign = ref({
    amount: null,
    bangNum: null,
    sort: null,
    rechargeStatus: 1,
})
const tableData = ref([])
async function GetRechargeList() {
    const res = await GetRechargeListApi()
    tableData.value = res.data
    // tableData.value = [
    //     {
    //         rechargeId: 1,
    //         amount: 100,
    //         bangNum: 10,
    //         sort: 1,
    //         createTime: 1999
    //     }
    // ]
}
GetRechargeList()

//编辑
async function edit(row) {
    console.log(row);
    formLabelAlign.value = row
    AddDialog.value = true
}

//删除
async function del(id) {


    ElMessageBox.confirm(
        '确认删除吗?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await DelRechargeListApi(id)
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        GetRechargeList()
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消成功',
        })
    })
}

//弹窗关闭
function handleClose() {
    AddDialog.value = false
    formLabelAlign.value = {
        amount: null,
        bangNum: null,
        sort: null,
        rechargeStatus: 1,
    }
}

function addNotice() {
    AddDialog.value = true
}

//保存
async function save() {
    if (!formLabelAlign.value.rechargeId) {
        await AddRechargeListApi(formLabelAlign.value)
        ElMessage({
            message: '添加成功',
            type: 'success',
        })
    } else {
        await EditRechargeListApi(formLabelAlign.value)
        ElMessage({
            message: '编辑成功',
            type: 'success',
        })
    }
    GetRechargeList()
    handleClose()
}
</script>



<style scoped lang="scss"></style>